<template>
  <div>
    <slot name="top"></slot>
    <p>app的子组件</p>
    <p>slot：插槽，作用就是显示组件标签中间的内容.组件中间的内容默认是舍弃的</p>
    <p>插槽和父传子的区别：父传子是传递数据；插槽还可以传递dom节点</p>
    <p>插槽的分类：
      1.匿名插槽：没有名字，没有约束
      2.具名插槽：有名字，对号入座
      3.作用域插槽：将子组件的数据修改后再显示。一方面传dom，另一方面也传变量
    </p>
    <!-- :user="user"将数据传给父组件，让他修改，之后传回来显示 -->
    <slot :user="user">{{user.lastName}}</slot>
    <slot name="bottom"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        lastName: 'Ma',
        firstName: 'Jack'
      }
    }
  },
}
</script>

<style>

</style>